<template>
  <div id="home-page">
   <el-button class="back"  plain size="mini" @click="onPage(1)">
      <i class="fa fa-undo" aria-hidden="true"></i>
      <span>Back</span>
    </el-button>
   <div class="article-card-list">
      <!-- <article-card v-for="post of posts"
                    :key="post.slug"
                    :format="format"
                    :post="post"
                    :showPhotos="true"
                    @photo-zoom-in="showPhotoDetail"></article-card> -->
    </div>
   <!-- <el-pagination class="pagination" v-if="shouldPage" small layout="prev, pager, next"
                   :total="pagination.total"
                   :page-size="pagination.pageSize"
                   :current-page="page" @current-change="onPage"></el-pagination> -->
    <!-- <el-dialog :visible.sync="modal.isShown" width="min-content">
      <img class="modal-picture" :src="modal.url" :alt="modal.url" @click="modal.isShown = false"/>
    </el-dialog> -->
		<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>


		
		
		
		
  </div>
</template>

<style lang="css">
  #home-page {
    .back {
      margin-bottom: 1rem;
    }

    .modal-picture {
      max-width: 950px;
      min-width: 150px;
      min-height: 100px;
      cursor: zoom-out;
    }

    .pagination {
      text-align: center;
    }
  }
</style>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>

<style lang="css">

  .el-pagination .el-pager .active {
    background-color: #5c5c5c;
    color: #fff;
    border-radius: 0.2rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
  }
</style>

<!-- <script>
	import Vue from 'vue'
	//1.实例化组建
	// Vue.component('my-div',{
	// 		template:'#my-div'
	// })
	var HomePage = new Vue({
		name:'HomePage',
		el:'#app',
		methods:{
			onPage:function (message) {
				alert(message)
			}
		}
	})
	export var HomePage;
</script> -->

<!-- // <script>
// export default {
//   methods: {
//     onPage:function (message) {
//     			alert(message)
//     		}
//   },
// }
</script> -->

<!-- <script lang="ts" src="./home.page.ts"></script> -->
<!-- <script lang="js" src="./HomePage.js"></script> -->

<script>
export default {
  name: 'HomePage',
	methods:{
		onPage:function (message) {
		    			alert(message);
							
		    		}
	}
}
</script>